<template>
	<div class="return_ticket">
		<x-header @on-click-back="forward" title="创建活动" :left-options="{backText: '',preventGoBack:true}">
		</x-header>
		<div class="content" v-if="page===0">
			<div class="act_subject">
				<group title="">
					<x-input title="活动名称" v-model.trim="input1" placeholder="输入活动名称，最多12个字" :show-clear="false" placeholder-align="right"></x-input>
				</group>
			</div>
			<div class="sel_dates">
				<div class="sel_start_date">
					<group>
						<datetime v-model="value1" placeholder="" title="起始日期" @on-cancel="log1" @on-confirm="onConfirm1"></datetime>
					</group>
				</div>
				<div class="sel_end_date">
					<group>
						<datetime v-model="value2" placeholder="" title="结束日期" @on-cancel="log2" @on-confirm="onConfirm2"></datetime>
					</group>
				</div>
			</div>
			<div class="ticket_condition common">
				<p>返券条件</p>
				<div>
					<group title=" ">
						<x-input style="width:2.7rem;" title="订单满" v-model.trim="input2" placeholder="" :show-clear="false" placeholder-align="right"></x-input>
					</group>
					<p>元</p>
				</div>
			</div>
			<div class="explain">近30天客单均价为66，建议值53-66</div>
			<div class="add_tickets" v-if="!ticketData">
				<div class="add_ticket" @click="addTicket">
					<img src="../../assets/images/activity/add_ticket.jpg" alt="" />
					<span>添加优惠券</span>
				</div>
			</div>
			<div class="have_tickets" v-if="ticketData">
				<div class="have_ticket">
					<div class="prices">
						<p><span>{{ ticketData.discount }}</span>元</p>
					</div>
					<div class="ticket_info">
						<p>1.订单结算满{{ ticketData.condition }}可用</p>
						<p>2.{{ ticketData.valid }}</p>
					</div>
					<div class="options">
						<p>
							<span @click="edit_ticket">编辑</span>
							<span>|</span>
							<span @click="delete_ticket">删除</span>
						</p>
					</div>
				</div>
			</div>
			<div class="stocks common">
				<p>库存数量</p>
				<div>
					<group title=" ">
						<x-input style="width:2.7rem;" title=" " v-model.trim="input3" placeholder="" :show-clear="false" placeholder-align="right"></x-input>
					</group>
					<p>张</p>
				</div>
			</div>
			<div class="agreement">
				<p>已阅读并同意<span @click="goProtocol">《商家自营销协议》</span>
					<x-switch title="" v-model="isSwitch"></x-switch>
				</p>
			</div>
			<footer>
				<x-button v-if="isSwitch" style="background:#02c1af;color:#fff;" @click.native="ensureSave">确认并保存</x-button>
				<x-button v-if="!isSwitch" style="background:#cbd2d8;color:#fff;">确认并保存</x-button>
			</footer>
		</div>
		<!-- 添加优惠券start -->
		<div class="content2" v-if="page===1">
			<div class="common">
				<p>优惠面额</p>
				<div>
					<group title=" ">
						<x-input style="width:2.7rem;" title=" " v-model.trim="input11" placeholder="" :show-clear="false" placeholder-align="right"></x-input>
					</group>
					<p>元</p>
				</div>
			</div>
			<div class="explain">近30天客单均价为66，建议值3-7</div>
			<div class="common">
				<p>使用条件</p>
				<div>
					<group title=" ">
						<x-input style="width:2.7rem;" title="订单满" v-model.trim="input12" placeholder="" :show-clear="false" placeholder-align="right"></x-input>
					</group>
					<p>元</p>
				</div>
			</div>
			<div class="explain">近30天客单均价为66，建议值53-66</div>
			<div class="ticket_valid">
				<!--<p>优惠券有效期</p>-->
				<div>
					<group title=" ">
						<popup-picker title="优惠券有效期" :data="dateList" v-model="value11" @on-change="onChange11" placeholder="选择"></popup-picker>
					</group>
				</div>
			</div>
			<div class="btns">
				<button @click="backs">返回</button>
				<button @click="ensureAdd">确认并添加</button>
			</div>
		</div>
		<!-- 添加优惠券end -->		
		<alert v-model="show1" title="提示" @on-show="onShow" @on-hide="onHide">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Datetime, Group, Alert, XInput, XSwitch, XButton, PopupPicker } from 'vux';
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'return_ticket',
		data() {
			return {
				page: 0, //0-显示主页面  1-显示添加优惠券页面
				input1: '', //活动名称
				value1: '', //起始时间
				value2: '', //结束时间
				show1: false,
				alert_title: '',
				input2: '', //订单满多少元
				input3: '', //库存
				input11: '', //优惠面额
				input12: '', //使用条件
				value11: [], //有效期
				dateList: [], //选择有效期数据
				ticketData: '', //添加的优惠券数据
				isSwitch: true, //是否同意协议
                flagss: true, //防止重复提交
                params: '',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert,
			XInput,
			XSwitch,
			XButton,
			PopupPicker
		},
		computed: {

		},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			//选择有效期数据封装
			let arr = [];
			for(let i = 1; i <= 15; i++) {
				arr.push('领券后' + i + '天内')
			}
			this.dateList.push(arr);
		},
		methods: {
			//返回
			forward() {
				let self = this;
				this.$vux.confirm.show({
					content: '活动配置还未保存，是否确定退出?',
					confirmText: '退出',
					onConfirm() {
						self.$router.go(-1);
					}
				})
			},
			onConfirm1(val) {
				this.value1 = val;
			},
			log1() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择起始日期';
					this.value1 = this.value2 = '';
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于起始日期';
					this.value2 = '';
				}
			},
			log2() {

			},
			onShow() {

			},
			onHide() {

			},
			//添加优惠券
			addTicket() {
				this.page = 1;
			},
			onChange11() {

			},
			//返回
			backs() {				
				this.page = 0;
			},
			//确认添加
			ensureAdd() {
				let reg = /^[0-9]*$/;
				if(this.input11 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入优惠面额',
					})
					return;
				}
				if(!reg.test(this.input11)) {
					this.$vux.alert.show({
						title: '提示',
						content: '优惠面额必须为数字',
					})
					return;
				}
				if(this.input12 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入使用条件',
					})
					return;
				}
				if(!reg.test(this.input12)) {
					this.$vux.alert.show({
						title: '提示',
						content: '使用条件必须为数字',
					})
					return;
				}
				if(this.value11.length === 0) {
					this.$vux.alert.show({
						title: '提示',
						content: '请选择优惠券有效期',
					})
					return;
				}
				let obj = {};
				obj.discount = +this.input11;
				obj.condition = +this.input12;
				obj.valid = this.value11.join();
				this.ticketData = obj;
				//console.log(this.ticketData);
				this.page = 0;
			},
			//编辑优惠券
			edit_ticket() {
				this.page = 1;
			},
			//删除优惠券
			delete_ticket() {
				this.input11 = this.input12 = '';
				this.value11 = [];
				this.page = 0;
				this.ticketData = '';
			},
			//协议
			goProtocol() {
				this.$router.push('/protocol');
			},
			//确认保存
			ensureSave(){
                if(this.input1 == '') {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请输入活动名称'
                    });
                    return;
                }
                if(!this.value1) {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择起始时间'
                    });
                    return;
                }
                if(!this.value2) {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请选择结束时间'
                    });
                    return;
                }
                if(this.input2 == '') {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请输入返券条件'
                    });
                    return;
                }
                if(this.ticketData == '') {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请添加优惠券'
                    });
                    return;
                }
                if(this.input3 == '') {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '请输入库存'
                    });
                    return;
                }
                if(!this.flagss) {
                    return false;
                }
				let obj = {};
                let s1 = this.value1;
                let s2 = this.value2;
                let obj2 = {};
                obj.tickets = [];
				obj.name = this.input1;
                s1 = new Date(s1.replace(/-/g, "/"));
                s2 = new Date(s2.replace(/-/g, "/"));
                obj.start_time = s1.getTime();
                obj.end_time = s2.getTime();
                obj.condition_amount = +this.input2;
                obj.get_count = +this.input3;
                obj2.door = this.ticketData.discount;
                obj2.money = this.ticketData.condition;
                obj2.days = +this.ticketData.valid.match(/\d+/)[0];
                obj.tickets.push(obj2);
				//console.log(obj);return;
                this.$axiosPost('/coupon/index/coupons' + this.params, obj).then(res => {
                    this.flagss = false;
                    console.log(res);
                    if(res.code === 200) {
                        this.$vux.toast.show({
                            text: '添加成功',
                            position: 'middle'
                        })
                        setTimeout(() => this.$router.push('/actList/0'), 1500);
                    }
                })
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.return_ticket {
		.common {
			background: #fff;
			margin-top: .28rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 .26rem;
			p {
				font-size: .34rem;
				color: #252525;
			}
			>div {
				display: flex;
				align-items: center;
			}
		}
		.explain {
			background: #f0eff5;
			text-align: left;
			font-size: .28rem;
			color: #87868b;
			padding: .14rem .18rem .28rem .18rem;
		}
		.content {
			.act_subject {
				margin: .26rem 0;
			}
			.sel_start_date {
				border-bottom: 1px solid #f0f0f0;
			}
			.add_tickets {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #efefef;
				padding-top: .24rem;
				.add_ticket {
					width: 94.7%;
					padding: .22rem 0;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						width: .32rem;
						height: .3rem;
						margin-right: .1rem;
					}
					span {
						font-size: .32rem;
						color: #47af96;
					}
				}
			}
			.have_tickets {
				background: #f0eff5;
				display: flex;
				justify-content: center;
				.have_ticket {
					width: 7.1rem;
					height: 2.2rem;
					background: url('../../assets/images/activity/bg.png');
					background-size: 7.1rem 2.2rem;
					position: relative;
					.prices {
						position: absolute;
						left: .86rem;
						bottom: .52rem;
						p {
							font-size: .24rem;
							color: #0cbba1;
							span {
								font-size: .56rem;
							}
						}
					}
					.ticket_info {
						position: absolute;
						left: 2.56rem;
						bottom: .44rem;
						p {
							width: 3rem;
							text-align: left;
							font-size: .3rem;
							color: #939393;
						}
						p:nth-of-type(2) {
							margin-top: .1rem;
						}
					}
					.options {
						position: absolute;
						top: .16rem;
						right: .2rem;
						p {
							font-size: .24rem;
							color: #33d3c9;
							span:nth-of-type(2) {
								color: #bfbdbe;
								margin: 0 .18rem;
							}
						}
					}
				}
			}
			.agreement {
				display: flex;
				background: #fff;
				padding: .12rem 0;
				margin-top: .22rem;
				p {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: .28rem;
					color: #2e2e2e;
					padding-left: .28rem;
					span {
						color: #02c1af;
					}
				}
			}
			footer {
				width: 90.1%;
				height: .75rem;
				margin: .26rem auto;
			}
		}
		.content2 {
			.btns {
				padding: .2rem .3rem;
				margin-top: .25rem;
				background: #fff;
				display: flex;
				justify-content: space-between;
				button {
					width: 3.36rem;
					height: .78rem;
					border-radius: .05rem;
					font-size: .34rem;
				}
				button:nth-of-type(1) {
					background: #f1f1f3;
					color: #49494b;
					border: 1px solid #d4d9e0;
				}
				button:nth-of-type(2) {
					background: #02c1af;
					color: #fff;
					border: 1px solid #00b397;
				}
			}
		}		
	}
</style>